// ------------------------------
// // edX Web Certificates: Certificate Rendering - Components

// About: (specifically for certificate rendering) styling for specific UI components ranging from global to modular.

// #RENDERING

// ------------------------------
// #RENDERING
// ------------------------------
.wrapper-accomplishment-title {

  .accomplishment-title {
    @extend %hd-1;
    font-weight: font-weight(light);
    line-height: 1.1;
    text-transform: uppercase;
    color: $dark-gray;
  }

  .accomplishment-title-label {
    @include margin-left(13px); // fix letterspacing shift
    display: block;
    font-size: rem(52);
    letter-spacing: .26em; // letterspacing relates to element font-size

    @include susy-breakpoint($bp-screen-md, $susy) {
      @include margin-left(0);
        font-size: rem(60);
    }
  }

  .accomplishment-title-type {
    display: block;
    font-size: rem(20);

    @include susy-breakpoint($bp-screen-md, $susy) {
      font-size: rem(23);
    }
  }

  .deco {
    display: inline-block;
    vertical-align: middle;
    margin-top: -7px;
    text-transform: lowercase;
    font-style: italic;
    font-size: rem(18);
  }
}

.wrapper-accomplishment-orgs {

  // CASE: single organization 
  img {
    max-width: 100%;
    max-height: 100px;
  }

  .list-orgs {
    @extend %list-unstyled;
  }

  .organization-name {
    @extend %hd-5;
    font-weight: $headings-font-weight-bold;
    word-wrap: break-word;
    text-align: center;
  }

  // CASE: three organizations
  .wrapper-organization:first-child:nth-last-child(3), .wrapper-organization:first-child:nth-last-child(3) ~ .wrapper-organization {
    display: block;
    margin: spacing-vertical(base) auto;

    @include susy-breakpoint($bp-screen-md, $susy) {
      display: inline-block;
      max-width: span(4 of 12);
      margin: 0;
      vertical-align: middle;

      .organization {
        @include margin-left(spacing-horizontal(large));
      }
    }
  }

  // CASE: two organizations
  .wrapper-organization:first-child:nth-last-child(2), .wrapper-organization:first-child:nth-last-child(2) ~ .wrapper-organization {
    display: block;
    margin: spacing-vertical(base) auto;

    @include susy-breakpoint($bp-screen-md, $susy) {
      display: inline-block;
      max-width: span(6 of 12);
      margin: 0;
      vertical-align: middle;

      .organization {
        @include margin-left(spacing-horizontal(large));
      }
    }
  }
}


.wrapper-accomplishment-statement {

  .accomplishment-recipient {
    @extend %hd-2;
    line-height: 1.2;
    color: $headings-emphasized-color;
    font-weight: $headings-font-weight-bold;

    @include susy-breakpoint($bp-screen-md, $susy) {
      font-size: rem(40);
    }
  }

  .accomplishment-course,
  .accomplishment-program {
    @extend %hd-3;
    line-height: 1.2;
    color: $headings-emphasized-color;
    font-weight: $headings-font-weight-bold;

    @include susy-breakpoint($bp-screen-md, $susy) {
      font-size: font-size(xxx-large); // @extend %hd-2; extends not working
    }
  }

  .copy {
    @extend %copy-meta;

    @include susy-breakpoint($bp-screen-md, $susy) {
      font-size: font-size(large); // @extend %copy-large; extends not working
    }
  }
}

.wrapper-signatories {

  img {
    max-width: 100%;
    max-height: 150px;
  }
}

.signatory {
  margin-top: spacing-vertical(small);

  .signatory-signature {
    max-width: 60%;
    max-height: 60px;
  }

  .signatory-name {
    @extend %hd-6;
    font-size: rem(14);
    font-weight: $headings-font-weight-bold;
  }

  .signatory-credentials {
    @extend %copy-micro;
    color: palette(grayscale, dark);

    .role {
      white-space: pre-line;
    }

    .organization {
      display: block;
      margin-top: spacing-vertical(xx-small);
      font-style: italic;
    }
  }
}

.accomplishment-stamps {

  .title {
    @extend %hd-8;
    color: palette(grayscale, dark);
    display: block;
    margin-bottom: 0;
  }

  .emphasized {
    @extend %copy-micro;
    display: block;
    font-weight: font-weight(bold);
    color: palette(grayscale, dark);
  }
}

